import './recommendedReading.less';

import React, { useEffect } from 'react';

import {
  Link,
  useDispatch,
  useSelector,
} from 'umi';

import { IArticleItem } from '@/types';

interface Props { }

function RecommendedReading(props: Props) {
  const { } = props
  let dispatch = useDispatch()
  useEffect(() => {
    dispatch({
      type: "article/getRecommendedReading"
    })
  }, [])
  let { RecommendedReading } = useSelector((state: { article: IArticleItem }) => state.article)
  console.log(RecommendedReading);

  return (
    <div className='recommendedReading'>
      <h4 className='recommendedReading-h4'>
        推荐阅读
      </h4>
      <ul className='recommendedReading-ul'>
        {
          RecommendedReading.map((item: IArticleItem, index: number) => {
            return <Link   to={`/article/${item.id}`}  className='recommendedReading-li' key={item.id}>
              <h4 className='recommendedReading-li-h4'>{item.title}</h4>
            </Link>
          })
        }
      </ul>
    </div>
  )
}

export default RecommendedReading
